<template>
  <div id="box">
      <h1>学生管理系统  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎：{{this.$store.state.userInfo.username}}</h1>
      <div id="main">
          <aside>
              <dt>学生管理</dt>
                <dd><router-link to="/home/studentsList">学生列表</router-link></dd>
                <dd><router-link to="/home/addStudent">添加学生</router-link></dd>
                <dd><router-link to="/home/updateStudent">修改学生</router-link></dd>
                <!-- <dd><router-link to="/home/searchStudents">搜索学生</router-link></dd> -->
              <dt>班级管理</dt>
                <dd><router-link to="/home/classesList">班级列表</router-link></dd>
                <dd><router-link to="/home/addClasses">添加班级</router-link></dd>
              <dt>专业管理</dt>
                <dd><router-link to="/home/subjectList">专业列表</router-link></dd>
              <dt>其他功能</dt>
                <dd><router-link to="/home/others/counter">计数</router-link></dd>
                <!-- <dd><router-link to="/home/addClasses">添加班级</router-link></dd> -->
          </aside>
          <section>
              <!-- <router-view></router-view> -->

            <keep-alive>
              <!-- 需要缓存的组件 -->
            <router-view v-if="$route.meta.isKeepAlive"/>
            </keep-alive>
            <!-- 不需要缓存的组件 -->
                <router-view v-if="!$route.meta.isKeepAlive"/>
            </section>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang='scss'>
#box{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
h1{
    margin: 0;
    padding: 15px 20px;
    background-color: aqua;
}
#main{
    display: flex;
    flex-grow: 1;
    padding: 15px 20px;
    padding-bottom: 0;
    aside{
        width: 10%;
        // padding: 30px 50px;
        box-sizing: border-box;
        border: 1px solid #cccccc;
        padding-top: 20px;
        dt{
            font-weight: bold;
            margin: 10px 0;
            margin-left: 30px;
        }
        dd{
            margin: 0;
            width: 100%;
            height: 50px;
            text-align: center;
            a{
                width: 100%;
                height: 100%;
                color: #000;
                line-height: 50px;
                text-decoration: none;
                display: inline-block;
                &:hover{
                    background-color: #2f54eb;
                    color: #fff;
                }
            }
        }
    }
    section{
        flex-grow: 1;
        padding: 20px;
        border: 1px solid #cccccc;
    }
}
</style>